<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <style>
        #page-wrapper h1{ display: block; margin-bottom: 20px; border-bottom:1px solid #999; font-size: 16px; padding-left:2px; font-weight: bold; line-height: 35px;}
        select.year,select.mouth{ width: 100px;}
        #btn{ display: inline-block; background-color: #ffbe34; line-height: 35px; padding: 0 15px; font-size: 14px; color: #fff; border-radius: 4px; cursor: pointer;}
        #depart-box{ display: block; padding: 20px;}
        #depart-box label{ display: inline-block; margin: 20px 20px 0;}
        #depart-box .bot{ display: block; padding-top: 50px; text-align: center;}
        .form-control{ border: none; box-shadow: none; margin-top: 3px; background-color: transparent;}
        .img-box{ display: block; margin: 10px 5% 0 10%; padding: 10px;}
        .img-box img{ border: 1px solid #ccc; margin: 0 5px; max-height: 100px;}
        .total-price{ color: #ffbe34; font-size: 24px;}

        .mes-box{ display: block; margin-left: 10%; overflow: hidden;}
        .mes-tit{ display: block; padding: 0 20px; line-height: 40px; background-color: #eee; border-top: 1px solid #ccc; overflow: hidden;}
        .mes-tit .tit{ float: left; width: 60%;}
        .mes-tit .contract{ float: left;}
        .mes-tit .price{ float: right;}
        .mes-li .contract{ float: left;}
        .mes-li .price{ float: right;}
        .mes-box ul{ display: block; margin: 0; padding: 0; overflow: hidden;}
        .mes-box li{ display: block; padding: 20px; border-bottom: 1px solid #ccc; overflow: hidden;}
        .mes-box li .box{ float: left; width: 60%;}
        .mes-box li .box img{ float: left; margin-right: 10px; border: 1px solid #ccc;}
        .mes-box li .price{ float: right;}
        .box .tit{ display: inline-block;}
        #offline-pay{ display: inline-block; padding: 0 10px; line-height: 35px; background-color: #ffbe34; color: #fff; border-radius: 5px; cursor: pointer;}
        .bot-span{ text-align: right;}
        .remark-con{ display: block; border: 1px solid #ccc; padding: 10px 20px; line-height: 200%; min-height: 75px;}
        .user-name{ padding-left: 30px;}
        .order-image{ margin:0;}
    </style>
</head>
<body>

<div id="page-wrapper" >
    <div class="panel panel-f5">
        <div class="panel-body row">
            <div class="form-horizontal">
                <h1>● 操作信息</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">当前订单状态：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control">
                            <#if orderProductDto.status == 1>待支付</#if>
                            <#if orderProductDto.status == 2>已完结</#if>
                            <#if orderProductDto.status == 3>已关闭</#if>
                        </span>
                    <#if orderProductDto.status == 2 && orderProductDto.online == 1>
                        <span class="form-control detail-span user-name">操作人账号：</span>
                        <span class="form-control">${orderProductDto.userName!}</span>
                    </#if>
                    </div>
                </div>
            <#if orderProductDto.status == 2 && orderProductDto.online == 1>
                <#if (orderProductDto.orderProductImageList)??>
                    <div class="form-group">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">上传的凭证图片：</span>
                        <div class="col-sm-9 col-xs-8 img-box order-image">
                            <#list orderProductDto.orderProductImageList as orderProductImage>
                                <img src="${orderProductImage.image!}" width="100"/>
                            </#list>
                        </div>
                    </div>
                </#if>
                <div class="form-group">
                    <div class="col-sm-10 col-xs-10" style="padding-left:10%">
                        <div class="remark-con">
                            操作备注：${orderProductDto.remark!}
                        </div>
                    </div>
                </div>
            </#if>
            <#if orderProductDto.status == 1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"><b id="offline-pay">已通过线下打款</b></span>
                    <div class="col-sm-9 col-xs-8">
                    </div>
                </div>
            </#if>

                <h1>● 订单信息</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">订单号：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="dataObj.orderId"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">客户姓名：</span>
                        <span class="form-control" v-text="dataObj.name"></span>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">手机号码：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="dataObj.phone"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">身份证号：</span>
                        <span class="form-control" v-text="dataObj.idCard"></span>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">银行卡号：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="dataObj.bankCard"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</span>
                        <span class="form-control" v-text="dataObj.address"></span>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">下单时间：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="dataObj.createTime"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span"></span>
                        <span class="form-control"></span>
                    </div>
                </div>
                <hr/>

                <h1>● 客户证卡照</h1>
                <div class="form-group">
                    <div class="img-box">
                        <img v-if="dataObj.bankPhoto" :src="dataObj.bankPhoto">
                        <img v-if="dataObj.positivePhoto" :src="dataObj.positivePhoto">
                        <img v-if="dataObj.reversePhoto" :src="dataObj.reversePhoto">
                    </div>
                </div>

                <h1>● 销售员信息</h1>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">销售员：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="dataObj.userName"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span">所属部门：</span>
                        <span class="form-control" v-text="dataObj.deptName"></span>
                    </div>
                </div>
                <hr/>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4  detail-span">工号：</span>
                    <div class="col-sm-5 col-xs-4">
                        <span class="form-control" v-text="dataObj.jobNumber"></span>
                    </div>
                    <div class="col-sm-5 col-xs-4">
                        <span class="control-label col-sm-2 col-xs-4  detail-span"></span>
                        <span class="form-control"></span>
                    </div>
                </div>
                <hr/>

                <h1>● 产品信息</h1>
                <div class="form-group">
                    <div class="col-sm-10 col-xs-10 mes-box">
                        <div class="mes-tit">
                            <span class="tit">产品名称</span>
                            <span class="contract">产品合同</span>
                            <span class="price">产品售价</span>
                        </div>
                        <ul>
                            <li class="mes-li">
                                <div class="box">
                                    <img src="${orderProductDto.productImage!}" width="100"/>${orderProductDto.productName!}
                                </div>
                                <a class="contract" href="${orderProductDto.contractUrl!}" target="_blank">点击查看</a>
                                <div class="price">￥${orderProductDto.moneyCount!}</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <h1>● 费用信息</h1>
                <div class="form-group">
                    <span class="control-label detail-span col-sm-11 col-xs-11 bot-span">用户已选择：
                    ${orderProductDto.projectStr!}
                    <#--<#if (orderProductDto.projectList)??>-->
                    <#--<#list orderProductDto.projectList as project>-->
                    <#--${project.name!}${project.containNum!}${project.unit!}  +-->
                    <#--</#list>-->
                    <#--</#if>-->
                    </span>
                </div>
                <hr>
                <div class="form-group">
                    <span class="control-label detail-span col-sm-11 col-xs-11 bot-span">= 已付款金额：<b class="total-price">￥${orderProductDto.moneyCount!}</b></span>
                </div>
                <hr>
            <#--<div class="form-group">-->
            <#--<span class="control-label col-sm-4 col-xs-4"></span>-->
            <#--<div class="col-sm-8 col-xs-8">-->
            <#--<button type="button" class="btn btn-info" onclick="goBack()"><i class="fa fa-close"></i>返回</button>-->
            <#--</div>-->
            <#--</div>-->
            </div>
        </div>
    </div>
</div>

<script src="${basePath}/bootstrap/js/vue.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/js/campsite.js" type="text/javascript"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#page-wrapper",
        data: {
            dataObj: {}
        },
        methods: {},
        created: function(){
            var _this = this;
            $.ajax({
                url: '${basePath}/admin/order/product/detail/${orderProductDto.id}',
                type: 'GET',
                dataType: 'json',
                data: {},
                success: function(data){
                    console.log(data.result)
                    _this.dataObj = data.result;
                },
                error: function(){
                    console.log("error")
                }
            })
        }
    })

    //新增上传框
    $('.add-inputfile5').on('click',function(){
        addImg('policy',this);
    });
    function addImg(name1,obj) {
        var str1 = "<div class='inputfile-img-box'><input class='obj-input' name=" + name1 + " value='' type='hidden'>" +
                "<img class='obj-img' src='' style='display:none' width='100' height='100'><span class='input-file'>" +
                "<input data-image=" + name1 + " data-action='goods' type='file' onchange='uploadImg(this)'></span><i class='fa fa-close'></i></div>";
        var len = $(obj).parent().find(".inputfile-img-box").length;
        if (len < 2) {
            $(obj).before(str1);
        }
        else {
            return false
        }
        $("i.fa-close").click(function () {
            $(this).parent().remove();
        });
    }

    function addSer(obj){
    <#--layer.open({-->
    <#--type: 2,-->
    <#--area: ['600px','500px'],-->
    <#--title: ['','text-align:center;font-weight:bold;background:#fff;'],-->
    <#--content: ['${basePath}/admin/series/create?shopId='+'${shopId!}'+'&revet=third','no'],-->
    <#--success: function (layero, index) {-->
    <#--//layer.iframeAuto(index)//高度自适应-->
    <#--},-->
    <#--end:function(){-->
    <#--window.location.reload()-->
    <#--}-->
    <#--});-->
        var _this = "<img src='"+$(obj).attr("data-name")+"' style='max-height: 450px;'>";
        layer.open({
            type: 1,
            area: ['auto','auto'],
            title: false,
            content: _this,
            end: function () {
                layer.closeAll()
            }
        });
    }

    function goBack(){
        window.location.href="${basePath}/orderPackage/list";
    }
    $(function(){
    <#--var imgArr = ${orderProductDto.credentialsUrl};-->
    <#--var temp = "";-->
    <#--for(var i= 0,len=imgArr.length;i<len;i++){-->
    <#--temp += '<img src="'+imgArr[i]+'" height="100">';-->
    <#--$("#credentialsUrl").append(temp);-->
    <#--}-->




        $(".img-box img").each(function(){
            $(this).click(function(){
                var _this = "<img src='"+$(this).attr("src")+"' style='max-height: 450px;'>";
                layer.open({
                    type: 1,
                    area: ['auto','auto'],
                    title: false,
                    content: _this,
                    end: function () {
                        layer.closeAll()
                    }
                });
            })
        })

        $("#offline-pay").click(function(){
            //请求数据成功后 => 弹窗
            //$.ajax();
            <#--layer.open({-->
                <#--type: 2,-->
                <#--area: ['700px','400px'],-->
                <#--title: ['确认订单款项','font-weight:bold;background:#fff;'],-->
                <#--content: ['${basePath}/admin/order/product/offline/' + ${orderProductDto.orderId},'yes'],-->
                <#--end: function () {-->
                    <#--layer.closeAll()-->
                <#--}-->
            <#--});-->
        })
    });
</script>
</body>
</html>
